<template>
  <div class="home">
    <el-row justify="center" align="middle" style="height: 100vh">
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <h2>欢迎使用 Vue 3 + Element Plus</h2>
            </div>
          </template>
          <el-button type="primary" @click="handleClick">点击我</el-button>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'

const handleClick = () => {
  ElMessage.success('Hello Element Plus!')
}
</script>

<style scoped>
.card-header {
  text-align: center;
}
</style> 